<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>找回密码</title>
    <link rel="icon" href="./../images/favico.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../styles/login.css">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--引入vue-->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
</head>

<body>
<div class="limiter" id="login">
    <div class="container-login100">
        <div class="wrap-login100">
            <div class="login100-form-title" style="background-image: url(./../images/bg-01.jpg);">
                <span class="login100-form-title-1">找 回 密 码</span>
            </div>

            <form class="login100-form validate-form" @submit.prevent="submit">
                <div class="wrap-input100 validate-input m-b-18">
                    <input class="input100" v-model="form.email" type="text" placeholder="输入您的邮箱">
                    <span class="focus-input100"></span>
                </div>
                <div class="wrap-input100 validate-input m-b-26 ">
                    <input class="input100" v-model="form.code" type="text" placeholder="输入您的验证码">
                    <el-button size="mini" v-if="codeShow" style="position: absolute;right: 0px;top: 10px;" @click="getPhoneCode" round>获取验证码</el-button>
                    <el-button size="mini" v-if="!codeShow" style="position: absolute;right: 0px;top: 10px;color: red" class="count" disabled="disabled" round>{{count}}秒后重试</el-button>
                    <span class="focus-input100"></span>
                </div>
                <div class="wrap-input100 validate-input m-b-18">
                    <input class="input100" v-model="form.password" type="password" placeholder="输入新的密码">
                    <span class="focus-input100"></span>
                </div>
                <div class="container-login100-form-btn">
                    <el-link type="primary" style="position: absolute;" @click="toLogin">前往登录</el-link>
                    <button class="login100-form-btn" type="submit">修 改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
<script src="./../api/change-pass.js"></script>

<script>
    new Vue({
        el: "#login",
        data() {
            return {
                codeShow: true,
                count: '',
                timer: null,
                form: {
                    code: '',
                    email: '',
                    password: ''
                },
                authCode: "",
                code: "",
                loading: false
            }
        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {
            toLogin(){
                window.requestAnimationFrame(()=>{
                    window.location.href= '/front/page/login.html'
                })
            },
            getPhoneCode() {  //获取邮箱验证码
                var Reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                //调用正则验证test()函数
                // 正则验证
                    if (Reg.test(this.form.email)) {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.codeShow = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.codeShow = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                        getEmailCodeApi(this.form.email).then(res=>{
                            const code = res.code;
                            if (code==1){
                                this.$notify.success({
                                    title: res.data,
                                    position: 'top-left'
                                });
                            }
                        }).catch((err)=>{
                            console.log(err)
                        })
                } else {
                        this.$notify.error({
                            title: '邮箱格式不正确',
                            position: 'top-left'
                        });
                }
            },
            async submit() {
                if (this.form.email == "") {
                    // createCode()
                    // this.makeCode()
                    this.$notify.error({
                        title: '邮箱' + '不能为空',
                        position: 'top-left'
                    });
                    return;
                }else
                if (this.form.password == "") {
                    // this.makeCode()
                    this.$notify.error({
                        title: '密码出错' + '不能为空',
                        position: 'top-left'
                    });
                    return;
                }else
                if (this.form.code == "") {
                    // this.makeCode()
                    this.$notify.error({
                        title: '验证码不能为空',
                        position: 'top-left'
                    });
                    return;
                }
                 else {
                    updatePasswordApi(this.form).then(res => {
                        if (res.code != 1) {
                            this.$notify.error({
                                title: res.msg,
                                position: 'top-left'
                            });
                        } else {
                            this.$notify.success({
                                title: res.data,
                                position: 'top-left'
                            });
                        }
                    })
                }
            }
        }
    })
</script>


</body>

</html>